<template>
  <div class="dashboard-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>快捷操作</span>
      </div>
      <el-row style="padding: 50px">
        <el-col :span="6">
          <div class="home-btn order" @click="to('/sale/order/save')">
            <span>录订单</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="home-btn work-order" @click="to('/erp/produce')">
            <span>查排单</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="home-btn inv-out" @click="to('/sale/order/shipment')">
            <span>送货</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="home-btn inv" @click="to('/erp/product')">
            <span>查库存</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="home-btn mold" @click="to('/erp/mold')">
            <span>模具</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="home-btn output" @click="to('/erp/output')">
            <span>记产量</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
    }
  },
  methods: {
    to(url) {
      this.$router.push({ path: url })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.home-btn:hover {
  transform: scale(1.2);
  background-color: #f1f1f1;
  border-radius: 30px;
  color: #20a0ff;
}

.home-btn {
  position: relative;
  width: 120px;
  height: 120px;
  background-size: cover;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
  border-radius: 30px;
  margin-bottom: 50px;
}

.order {
  background-image: url("../../../images/order.png");
}

.work-order {
  background-image: url("../../../images/work-order.png");
}

.inv-out {
  background-image: url("../../../images/inv-out.png");
}

.inv {
  background-image: url("../../../images/inv.png");
}

.mold {
  background-image: url("../../../images/mold.png");
}

.output {
  background-image: url("../../../images/output.png");
}

.home-btn span {
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}
</style>
